<template>
	<view>
		<view class="top">
			<view class="success">
				<image v-if="payShow == '支付中!'" src="../../static/payStatus.gif" mode="widthFix"></image>
				<uni-icons v-else type="checkbox-filled" size="70" color="#fff"></uni-icons>
				<view class="lab1">{{payShow}}</view>
				<view class="lab2">感谢您的购买</view>
				
			</view>
			<view class="orderG">
				<view class="orderMoney">
					￥<text>{{orderTotalAmount}}</text>
				</view>
				<view class="orderDetail">
					<view class="orderKey">
					  <text>订单编号：</text>	{{orderCode}}
					</view>
					<view class="orderKey">
					   <text>下单时间：</text>{{orderTime}}
					</view>
					<view class="orderKey">
						<text>支付方式：</text>{{payType}}
					</view>
				</view>
			</view>
		</view>
		<view class="next" @click="btnClick">确定</view>
	</view>
</template>

<script>
	import {payStatus} from '../../api/index.js'
	export default {
		data() {
			return {
				payShow:'支付中!',
				payType:'',
				orderCode:'',
				orderTotalAmount:'',
				orderTime:'',
				timer: null,
				seconds:0
			}
		},
		onLoad(option) {
			if (option.payType) {
				
			   this.payType = option.payType == 'wxpay'?'微信支付':'支付宝支付'
			   this.orderCode = option.orderCode
			   this.orderTotalAmount=option.orderTotalAmount
			   this.orderTime = option.orderTime
			   console.log('orderCode支付宝',option.orderCode)
			   this.newclearCar();
			   this.timer = setInterval(() => {
			   					
			   					if (this.seconds > 4) {
			   						this.timeUp()
			   						return
			   					}
								this.seconds++
			   					this.newclearCar();
			   				}, 2000)
			 
			   
			   
			}
		},
		onUnload() {
			this.timeUp()
		},
		methods: {
			btnClick(){
				uni.switchTab({
					url:'../mina/mina'
				})
				
				setTimeout(()=>{
					
					uni.navigateTo({
						url: '../order/order?current=0',
					})
					
					
				},500)
				
			},
			async newclearCar(){
				try{
					
					let {result} = await payStatus({orderCode:this.orderCode});
					if (result == '1') {
						this.payShow='支付成功！'
						this.timeUp()
					} else if (result == '2'){
						this.timeUp()
					}
				
		
				} catch(err) {
			    	console.log('我请求啦',err);
			    	// uni.showToast({
			    	// 	title:err.message,
			    	// 	icon:'none'
			    	// })
			    }
			},
			timeUp(){
				
				clearInterval(this.timer)
				this.timer = null

				
			}
		}
	}
</script>

<style>
page{
	background-color: #F8F9FD;
}
.top{
	
	background: linear-gradient(180deg, #8250FD 0%, #5644E5 100%);
	height: 540rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.success{
	margin-top: 150rpx;
	display: flex;
	color: #fff;
	align-items: center;
	flex-direction: column;
}
.success image{
	width: 130rpx;
	height: auto;
}

.lab1{
	margin-left: 10rpx;
	font-size: 50rpx;
	
}
.lab2{
	margin-top: 20rpx;
	font-size: 30rpx;
}
.orderG{
	margin-top: 60rpx;
	background-color: #fff;
	border-radius: 10rpx;
	width: 600rpx;
}
.orderMoney{
	height: 160rpx;
	line-height: 160rpx;
	text-align: center;
	border-bottom: 5rpx dotted #999;
	font-size: 32rpx;
    color: #5644E5;
	
}
.orderMoney text{
	font-size:46rpx;
	/* color: #F54353; */
	font-weight: bold;
}
.orderDetail{
	margin: 0 35rpx;
	padding-bottom: 80rpx;
}
.orderKey{
	color: #666;
	font-size: 30rpx;
	margin-top: 40rpx;
	
}
.next{
	margin: 500rpx auto;
	width: 678rpx;
	height: 84rpx;
	line-height: 84rpx;
	text-align: center;
	border-radius: 42rpx;
	color: #fff;
	font-size: 32rpx;
	background: linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);
	
}
</style>
